import { Component, Input, OnInit } from '@angular/core';
import { ModalService } from '@iux/live';

@Component({
  selector: 'app-demo28',
  templateUrl: './demo28.component.html',
  styles: [
    `
      h3 {
        margin: 0.16rem 0 0.08rem 0;
      }
    `,
  ],
})
export class Demo28Component implements OnInit {
  data;
  columns = [];
  activeColumn;
  subData;

  constructor(private modalService: ModalService) {}

  ngOnInit() {
    this.initColumns();
    this.initData();
  }

  initColumns() {
    this.columns = [
      { key: 'name', label: 'Name' },
      { key: 'status', label: 'Status' },
      { key: 'type', label: 'Provisioning Type' },
      { key: 'wwn', label: 'WWN', width: '300px' },
      { key: 'mapping', label: 'Mapping Status' },
      { key: 'storage', label: 'Storage Device' },
      { key: 'service', label: 'Service Level' },
      { key: 'protection', label: 'Protection Status' },
    ];
  }

  initData() {
    this.data = Array.from({ length: 2 }).map((item, key) => {
      return this.initMock(key);
    });

    this.subData = Array.from({ length: 5 }).map((item, key) => {
      return this.initSubData(key);
    });
  }

  initMock(key: number) {
    return {
      key,
      name: `LUN_00${key}`,
      status: 'Normal',
      type: 'Thin',
      wwn: '611e7b0cc54a825cf6f9ce9000014292',
      mapping: 'Mapped',
      storage: `V6-${key}`,
      ip: `8.46.185.224`,
      service: `Tier${key}`,
      protection: `Text${key}`,
      expand: false,
    };
  }

  initSubData(key: number) {
    return {
      name: `AAAA${key}`,
      type: 'Thin',
      ip: `8.46.185.224`,
      wwn: '611e7b0cc54a825cf6f9ce9000014292',
      os: 'Windows',
    };
  }

  showDetail(item) {
    this.activeColumn = item;

    this.modalService.create({
      lvModalKey: `tableDetail`,
      lvType: 'drawer',
      lvWidth: 'M',
      lvCloseButtonDisplay: true,
      lvDrawerPosition: 'right',
      lvDrawerPositionOffset: ['0px', '0px', '0px', '0px'],
      lvHeader: `${item.name}_Detail`,
      lvContent: DetailComponent,
      lvComponentParams: { data: item },
      lvAfterClose: () => {
        this.activeColumn = {};
      },
    });
  }

  isActive(item): boolean {
    return item?.name === this.activeColumn?.name;
  }
}

@Component({
  selector: 'detail-component',
  template: `
    <div>
      <p>Name: {{ data.name }}</p>
      <p>Status: {{ data.status }}</p>
      <p>Provisioning Type: {{ data.type }}</p>
      <p>WWN: {{ data.wwn }}</p>
      <p>Mapping Status: {{ data.mapping }}</p>
      <p>Storage Device: {{ data.storage }}</p>
      <p>Service Level: {{ data.service }}</p>
      <p>Protection Status: {{ data.protection }}</p>
    </div>
  `,
})
export class DetailComponent {
  @Input() data: { [key: string]: any };
}
